<template>
  <div class="home">

    <div class="game_list">
      <div class="game_item" @click="createRoom">
        <img src="../assets/game01.png" alt="game01">
      </div>
      <div class="game_item" @click="createRoom">
        <img src="../assets/game01.png" alt="game01">
      </div>
    </div>
      <div style="position:absolute;bottom: 100px;left: 50px;">
        <input v-model="room_id" type="text">
        <button @click="joinRoom">加入房间</button>
      </div>
  </div>
</template>

<script>

import {_createRoom, _getUser} from '../api'
export default {
  name: 'home',
  data () {
    return {
      room_id: ''
    }
  },
  mounted () {
    this.getserInfo()
  },
  methods: {
    // 获取用户信息
    getserInfo () {
      _getUser().then(res => {
        console.log(res)
      })
    },
    // 创建房间
    createRoom () {
      let vm = this
      let params = {
        "basePoint": 2,
        "consumCardNum": 1,
        "id": "string",
        "paiXing": [
          0
        ],
        "robZhuangType": 1,
        "roomId": 0,
        "roomType": 1,
        "rule": 0,
        "special": [
          0
        ],
        "xiazhu": 1
      }
      _createRoom(params).then(res => {
        console.log(res)
        if (res.code == 1) {
          this.room_id = res.data
          vm.joinRoom()
        }
      })
    },
    // 加入房间
    joinRoom () {
      this.$router.push({
        name: 'p13',
        query: {
          room: this.room_id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .home {
    width: 100%;
    height: 100%;
    background-image: url('../assets/bg.jpg');
    background-size:cover;
    .game_list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 80%;
      margin: 0px auto;
      .game_item {
        width: 122px;
        height: 166px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
